<template>
<div>
    <div class="home-page">
        <SearchBar />
        <div class="home-classify-wrap">
            <router-link active-class="active" tag="div" class="home-classify" :to="{ name:'Food'}">
                <span class="icon home-classify-icon">美食</span>
                <span>美食</span>
            </router-link>
            <router-link active-class="active" tag="div" class="home-classify" :to="{ name:'Food'}">
                <span class="icon home-classify-icon">超市</span>
                <span>美团超市</span>
            </router-link>
            <router-link active-class="active" tag="div" class="home-classify" :to="{ name:'Food'}">
                <span class="icon home-classify-icon">生鲜</span>
                <span>生鲜果蔬</span>
            </router-link>
            <router-link active-class="active" tag="div" class="home-classify" :to="{ name:'Food'}">
                <span class="icon home-classify-icon">专送</span>
                <span>美团专送</span>
            </router-link>
            <router-link active-class="active" tag="div" class="home-classify" :to="{ name:'Food'}">
                <span class="icon home-classify-icon">跑腿</span>
                <span>跑腿代购</span>
            </router-link>
            <router-link active-class="active" tag="div" class="home-classify" :to="{ name:'Food'}">
                <span class="icon home-classify-icon">下午茶</span>
                <span>下午茶</span>
            </router-link>
            <router-link active-class="active" tag="div" class="home-classify" :to="{ name:'Food'}">
                <span class="icon home-classify-icon">汉堡</span>
                <span>汉堡披萨</span>
            </router-link>
            <router-link active-class="active" tag="div" class="home-classify" :to="{ name:'Food'}">
                <span class="icon home-classify-icon">面</span>
                <span>米粉面馆</span>
            </router-link>
            <router-link active-class="active" tag="div" class="home-classify" :to="{ name:'Food'}">
                <span class="icon home-classify-icon">家常</span>
                <span>家常菜</span>
            </router-link>

           
        </div>
    </div>
    <transition name="router-slid" mode="out-in">
        <router-view class="home-route-page"></router-view>
    </transition>
</div>
</template>

<script>
import SearchBar from '@/components/global/SearchBar';
export default {
    data() {
        return {}
    },
    components: {},
    mounted: function () {},
    components: {
        SearchBar
    }
}
</script>

<style lang="scss" scoped>
.home-page {
    background: #fff;
}
.home-classify-wrap{
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    padding: 20px;
    border-bottom: 1px solid #ddd;
    .home-classify{
        width: 20%;
        text-align: center;
        margin-bottom: 15px;
        .home-classify-icon{
            display: block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            margin: 0 auto 5px;
            border-radius: 50%;
            background: #FE7E4B;
            color: #fff;
            font-size: 12px;
        }

    }
}
</style>
